<template>
  <div ref="chartRef" class="chart-container"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

const chartRef = ref(null);

onMounted(() => {
  const myChart = echarts.init(chartRef.value);
  const option = {
    title: {
      text: "用户增长趋势",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "新增用户",
        type: "line",
        data: [120, 200, 150, 80, 70, 110, 130],
        smooth: true,
        areaStyle: {
          color: "rgba(64,158,255,0.2)",
        },
        lineStyle: {
          color: "#409eff",
        },
        symbol: "circle",
        symbolSize: 8,
      },
    ],
  };

  myChart.setOption(option);

  // 响应式处理
  window.addEventListener("resize", () => {
    myChart.resize();
  });
});
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 400px;
}
</style>
